const styles = {}

styles.LoginWrapper = {
  width: '100%',
  height: '100vh',
  backgroundImage: 'linear-gradient(to bottom, #91d5ff 0%, #096dd9 100%)',
  overflow: 'auto',
  // paddingRight: '15px',
}

styles.LoginContent = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  height: 'calc(100% - 42px)',
  boxSizing: 'border-box',
}

styles.LoginBox = {
  width: '432px',
  margin: '0 auto',
  textAlign: 'center',
  '& .ant-card-body': {
    padding: '0',
  },
}

styles.LoginBoxHeader = {

}

styles.LoginLogo = {
  fontSize: '48px',
  color: '#40a9ff',
}

styles.LoginBoxHeaderSlogen = {
  // marginTop: '15px',
  color: '#40a9ff',
  fontSize: '22px',
}

styles.LoginBoxInner = {
  position: 'relative',
}

styles.LoginBoxContent = {
  padding: '18px 40px 0',
}

styles.RegisterBoxContent = {
  padding: '18px 40px 0',
}

styles.LoginFormIcon = {
  color: 'rgba(0, 0, 0, .25)',
}

styles.LoginFormButton = {
  width: '100%',
  backgroundColor: '#40a9ff',
  color: '#ffffff',
  borderColor: '#40a9ff',
  '&:hover,&:active,&:focus': {
    backgroundColor: '#1890ff',
    color: '#ffffff',
    borderColor: '#1890ff',
  },
}

styles.RegisterFormButton = {
  width: '100%',
  backgroundColor: '#73d13d',
  color: '#ffffff',
  '&:hover,&:active,&:focus': {
    backgroundColor: '#52c41a',
    color: '#ffffff',
    borderColor: '#52c41a',
  },
}

styles.LoginBoxSwitch = {
  width: '100%',
  display: 'flex',
  height: '58px',
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: '16px',
  borderTop: '1px solid #ebebeb',
  backgroundColor: '#f6f6f6',
  '& span': {
    color: '#40a9ff',
    cursor: 'pointer',
  },
}

styles.QRImage = {
  position: 'absolute',
  zIndex: 0,
  left: 0,
  right: 0,
  height: '100%',
  bottom: 0,
  transition: 'opacity .3s, height .3s',
  '&:before': {
    content: `''`,
    position: 'absolute',
    bottom: '-7px',
    transform: 'translate(-50%) rotate(45deg)',
    left: '50%',
    width: '20px',
    height: '20px',
    backgroundColor: '#fff',
    borderRadius: '4px',
  },
  '& .icon-qrcode': {
    width: '100%',
    height: '100%',
    boxSizing: 'border-box',
    backgroundColor: '#ffffff',
    borderRadius: '4px',
    color: '#40a9ff',
    fontSize: '150px',
    'boxShadow': '0 0 8px 0 rgba(26,26,26,.15)',
  },
  '&.QRImageHidden': {
    opacity: '0',
    height: '0',
    bottom: '0',
  }
}

styles.DownloadBtn = {
  marginTop: '30px',
  border: 'none',
  color: '#ffffff',
  width: '432px',
  height: '42px',
  backgroundColor: '#8590a6',
  '&:hover,&:active,&:focus': {
    backgroundColor: '#8590a6',
    color: '#ffffff',
    borderColor: 'none',
  },
}

styles.Footer = {
  color: '#ffffff',
  fontSize: '14px',
  textAlign: 'center',
}

export default styles
